<template>
	<view>
		<!-- 薯币信息展示 -->
		<view class="potato-coins-background">
			<text class="potato-coins-background-tit">我的薯币</text>
			<view class="potato-coins-money-backdround">
				<i class="potato-coins-money-icon"></i>
				<text class="potato-coins-money">{{balance}}</text>
			</view>
		</view>

		<!-- 充值标题和提示 -->
		<view class="consumption-tit">
			<text class="Recharge-tit-01">充值</text>
			<text class="Recharge-tit-02">不提倡未成年人充值消费</text>
		</view>

		<!-- 充值金额选项 -->
		<view class="Recharge-amount-background">
			<view class="Recharge-amount01">
				<view v-for="(money, index) in amounts" :key="index" class="Recharge-amount02">
					<view class="potato-coins-maney-background">
						<i class="Potato-coin-icon"></i>
						<text class="maney">{{ money.coins }}</text>
					</view>
					<button class="Recharge-amount" @click="handleButtonClick(money.price)">
						<text class="Recharge-amount-maney">¥ {{ money.price }}</text>
					</button>
				</view>
				<!-- 自定义充值金额选项 -->
				<view class="Recharge-amount02">
					<view class="potato-coins-maney-background">
						<i class="Potato-coin-icon"></i>
						<text class="maney">其他金额</text>
					</view>
					<button @click="show = true" class="custom">自定义</button>
				</view>
			</view>
		</view>

		<!-- 选择账单类型弹窗 -->
		<u-popup :show="isPopupVisible" @close="close" @open="open">
			<view>
				<view class=" Bottom-Kuang">
					<text class="chose-Bottom-Kuang">¥ {{ selectedAmount }}</text>
					<text class="Payment-amount">实际支付金额</text>
					<!-- 确认充值按钮 -->
					<button @click="confirmPayment" class="Alipay-buttom">确认充值</button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="isPopupVisible2" @close="close" @open="open">
			<view>
				<view class=" Bottom-Kuang">
					<text class="chose-Bottom-Kuang">¥ {{ customAmount }}</text>
					<text class="Payment-amount">实际支付金额</text>
					<!-- 确认充值按钮 -->
					<button @click="confirmPayment02" class="Alipay-buttom">确认充值</button>
				</view>
			</view>
		</u-popup>

		<!-- 用户服务协议选项 -->
		<view class="User-Services">
			<u-checkbox-group placement="column" @change="checkboxChange">
				<u-checkbox v-for="(item, index) in checkboxList1" :key="index" shape="circle" activeColor="red"
					size="35rpx" iconSize="28rpx" class="checkbox"></u-checkbox>
			</u-checkbox-group>
			<view class="Potato-Coin-Service-Agreement">薯币服务协议</view>
			<view class="Refund-request">未成年人退款申请</view>
		</view>

		<!-- 自定义输入金额弹窗 -->
		<u-popup :show="show" mode="center" @open="open">
			<view class="Popup">
				<text class="Popup-Recharge-amount">请输入您要充值的金额(元)</text>
				<input v-model="value" class="Amount-box"></input>
				<text v-if="value.trim() === ''" class="Default-amount-01">对应的薯币金额: 0</text>
				<text v-else-if="value >= 10 && value < 100000" class="Default-amount-01">对应的薯币金额: {{ value }}</text>
				<text v-else-if="value < 10" class="Minimum-amount">单笔最小金额为10元</text>
				<text v-else-if="value > 100000" class="Minimum-amount">单笔最大金额为10万元</text>
				<text v-else class="Minimum-amount">请输入正确的金额</text>
				<view class="ann-background">
					<view class="cancel" @click="close">取消</view>
					<view class="confirm" @click="confirm">确认</view>
				</view>
			</view>
		</u-popup>

		<!-- 提示信息 -->
		<view v-if="showPrompt" class="prompt">请阅读并同意协议</view>
		<view v-if="showPrompt02" class="prompt">请输入正确的金额</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkboxValue1: [],
				checkedBoxes: [],
				checkboxList1: [{
						disabled: false
					},
					{
						disabled: false
					}
				],
				radiolist1: [{
						name: 'kl',
						disabled: false
					},
					{
						name: 'kl',
						disabled: false
					},
				],
				show: false,
				value: '', // 默认选中微信支付
				showPrompt: false,
				isPopupVisible: false,
				isPopupVisible2: false,
				showPrompt02: false,
				asd: false,
				balance: 0,
				selectedAmount: null,
				customAmount: null,
				amounts: [{
						coins: 10,
						price: 10
					},
					{
						coins: 60,
						price: 60
					},
					{
						coins: 400,
						price: 400
					},
					{
						coins: 680,
						price: 680
					},
					{
						coins: 750,
						price: 750
					},
					{
						coins: 980,
						price: 980
					},
					{
						coins: 1980,
						price: 1980
					},
					{
						coins: 6980,
						price: 6980
					}
				]
			}
		},
		onLoad() {
			this.selectByblance();
		},
		methods: {
			selectByblance() {
				let userId = uni.getStorageSync("id");
				console.log(userId);
				this.request(`/pay/getUserBalance?userId=${userId}`, "get")
					.then((res) => {
						console.log(res);
						this.asd = res.data;
						this.balance = res.data.result.balance;
						console.log(this.balance);
					})
			},
			confirmPayment() {
				let userId = uni.getStorageSync("id");
				console.log(userId);
				this.request(`/pay/recharge?money=${this.selectedAmount}&userId=${userId}`, "get")
					.then((res) => {
						console.log(res);
						this.asd = res.data;
						if (this.asd.code === 200) {
							uni.showToast({
								title: this.asd.message,
								icon: 'success'
							});
							this.isPopupVisible = false;
							this.selectByblance();
						}
						console.log(this.asd);

					})
					.catch((err) => {
						console.log(err);
						uni.showToast({
							title: this.asd.message,
							icon: 'none'
						});
					});
			},
			confirmPayment02() {
				let userId = uni.getStorageSync("id");
				console.log(userId);
				this.request(`/pay/recharge?money=${this.value}&userId=${userId}`, "get")
					.then((res) => {
						console.log(res);
						this.asd = res.data;
						if (this.asd.code === 200) {
							uni.showToast({
								title: '充值成功',
								icon: 'success'
							});
							this.isPopupVisible2 = false;
							this.selectByblance();

						}
						console.log(this.asd);

					})
					.catch((err) => {
						console.log(err);
					});
			},
			// 复选框变更事件
			checkboxChange(n) {
				this.checkedBoxes = n;
				if (n.length === 2) {
					this.asd = true;
				} else {
					this.asd = false;
					setTimeout(() => {
						this.showPrompt = false;
					}, 3000);
				}
			},
			open() {
				// 弹窗打开时的处理逻辑
			},
			close() {
				this.show = false;
				this.isPopupVisible = false;
				this.isPopupVisible2 = false;
				this.value = '';
			},
			confirm(n) {
				if (isNaN(this.value) || this.value < 6 || this.value > 100000) {
					// 输入正确的金额
					this.showPrompt02 = true;
					setTimeout(() => {
						this.showPrompt02 = false;
					}, 3000);
				} else {
					// // 控制弹出框显示
					this.show = false;
					if (!this.asd) {
						// // 请阅读并同意协议
						this.showPrompt = true;
						setTimeout(() => {
							this.showPrompt = false;
						}, 3000);
					} else {
						this.customAmount = this.value;
						this.isPopupVisible2 = true;
					}
					this.request().then((res) => {
						console.log(res);
						this.asd = res.data;
					}).catch((err) => {
						console.log(err);
					})
				}
			},
			handleButtonClick(money) {
				console.log(this.checkedBoxes.length);
				if (this.checkedBoxes.length === 2) {
					this.asd = true;
				} else {
					this.asd = false;
					setTimeout(() => {
						this.showPrompt = false;
					}, 3000);
				};
				if (!this.asd) {
					this.showPrompt = true;
					setTimeout(() => {
						this.showPrompt = false;
					}, 3000);
				} else {
					this.selectedAmount = money;
					this.isPopupVisible = true;

				}
			}
		}
	}
</script>

<style scoped>
	.potato-coins-background {
		width: 100%;
		height: 200rpx;
		border-bottom: 0.5rpx solid gainsboro;
	}

	.potato-coins-background-tit {
		display: block;
		margin-top: 30rpx;
		margin-left: 30rpx;
	}

	.potato-coins-money-backdround {
		width: 200rpx;
		height: 100rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.potato-coins-money-icon {
		display: block;
		width: 80rpx;
		height: 80rpx;
		background-image: url("../../static/icon/Potato-coins.png");
		background-repeat: no-repeat;
		background-size: cover;
		margin-top: 10rpx;
	}

	.potato-coins-money {
		font-size: 60rpx;
	}

	.consumption-tit {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
	}

	.Recharge-tit-01,
	.Recharge-tit-02 {
		color: grey;
		line-height: 100rpx;
		font-size: 28rpx;
	}

	.Recharge-tit-01 {
		margin-left: 30rpx;
	}

	.Recharge-tit-02 {
		margin-right: 30rpx;
	}

	.Recharge-amount-background {
		width: 100%;
		height: 1050rpx;
	}

	.Recharge-amount-background .Recharge-amount01 {
		list-style: none;
		padding: 0;
	}

	.Recharge-amount-background .Recharge-amount01 .Recharge-amount02 {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.potato-coins-maney-background {
		width: 270rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.Potato-coin-icon {
		display: block;
		width: 50rpx;
		height: 50rpx;
		margin-left: 30rpx;
		background-image: url("../../static/icon/Potato-coins.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.Recharge-amount,
	.custom {
		width: 170rpx;
		height: 60rpx;
		background-color: #ff2442;
		margin-right: 15rpx;
		border-radius: 40rpx;
	}

	.maney {
		font-size: 30rpx;
		margin-left: 30rpx;
	}

	.Recharge-amount-maney {
		display: block;
		font-size: 33rpx;
		color: white;
		margin-top: -20rpx;
	}

	.checkbox {
		margin-left: 30rpx;
		margin-top: 10rpx;
	}

	.custom {
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		text-align: center;
		font-size: 35rpx;
	}

	/* 自定义输入金额弹出框样式 */
	.Popup {
		width: 600rpx;
		height: 390rpx;
	}

	.Popup-Recharge-amount {
		display: block;
		font-size: 30rpx;
		text-align: center;
		margin-top: 30rpx;
		letter-spacing: 6rpx;
	}

	/* 弹出框里的用户输入金额框 */
	.Amount-box {
		width: 500rpx;
		height: 60rpx;
		border: 0.5rpx solid gainsboro;
		margin: 35rpx auto;
		border-radius: 20rpx;
	}

	/* 对应输入金额样式 */
	.Corresponding-amount {
		margin-left: 35rpx;
		letter-spacing: 6rpx;
		color: gray;
	}

	/* 弹出框底部背景盒子 */
	.ann-background {
		width: 520rpx;
		height: 162rpx;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* 弹出框底部取消按钮 */
	.cancel,
	.confirm {
		width: 230rpx;
		height: 80rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 40rpx;
	}

	/* 弹出框底部取消按钮的边框 */
	.cancel {
		border: 0.5rpx solid gainsboro;
	}

	/* 弹出框底部确认按钮 */
	.confirm {
		background-color: #ff2442;
		color: white;
	}

	/* 弹出框的用户输入框下面的文字内容样式 */
	.Default-amount-01 {
		margin-left: 40rpx;
		color: gray;
	}

	.Minimum-amount {
		margin-left: 40rpx;
		color: #ff2442;
	}

	.User-Services {
		width: 500rpx;
		height: 100rpx;
		display: flex;
		flex-wrap: wrap;
	}

	/* 未成年人退款申请样式 */
	.Refund-request {
		margin-top: -45rpx;
		margin-left: 85rpx;
		color: #7095c8;
	}

	/* 鼠币服务协议样式 */
	.Potato-Coin-Service-Agreement {
		margin-left: 10rpx;
		color: #7095c8;
	}

	.prompt {
		width: 300rpx;
		height: 80rpx;
		background-color: #181818;
		border-radius: 50rpx;
		margin: auto;
		margin-top: -790rpx;
		color: white;
		text-align: center;
		line-height: 80rpx;
	}

	/* 勾选协议后的弹出框 */
	.Bottom-Kuang {
		display: block;
		height: 650rpx;
		background-color: white;
	}

	.chose-Bottom-Kuang {
		display: block;
		color: #ff2442;
		text-align: center;
		font-size: 45rpx;
		margin-top: 45rpx;
	}

	.Payment-amount {
		display: block;
		font-size: 25rpx;
		margin-top: 15rpx;
		text-align: center;
		color: gray;
	}

	.Alipay-buttom {
		background-color: #ff2442;
		color: white;
		margin-top: 100rpx;
		border-radius: 60rpx;
		margin-left: 50rpx;
		margin-right: 50rpx;
	}
</style>